<template>
  <div>
    <Page auto-content-height>
      <FosoCard :showheader="false" class="!px-0 !pt-0">
        <FosoForm
          ref="formRef"
          :form-columns="formColumns"
          :form-columns-num="8"
          :form-data="formData"
          :form-expand="true"
          label-position="right"
          label-width="auto"
          @search-handle="searchHandle"
        />
      </FosoCard>
      <!-- 表格 -->
      <FosoTable
        ref="FosoTable"
        :columns="columns"
        :request-api="getApiListData"
        :toolbarbutton-name="$t('sys.apis.addApi')"
        class="!h-[90%]"
        @add="openDrawerHandle('add', $event)"
        @delete="DeleteHandle($event)"
        @edit="openDrawerHandle('edit', $event)"
      />
    </Page>
    <!-- 弹窗框 -->
    <Drawer class="w-[40%]" @refresh="reloadTable" />
  </div>
</template>

<script setup lang="tsx">
import type { apiFormDataType } from './type';

import { Page, useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { ElTag } from 'element-plus';

import { deleteApi, getApiList } from '#/api/sys/api';

import ExtraDrawer from './components/drawer.vue';
// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});
const FosoTableRef = useTemplateRef('FosoTable');
// 表单实例
const formRef = ref();
// 表单数据
const formData = ref<apiFormDataType>({});

// 表格获取数据
const getApiListData = async (params: any) => {
  const { page = 1, pageSize = 5 } = params;
  const res: any = await getApiList({ page, pageSize, ...formData.value });
  return {
    total: res.total,
    items: res.data,
  };
};

const columns = computed(() => [
  {
    type: 'checkbox',
    width: 50,
  },

  {
    title: $t('sys.apis.path'),
    field: 'path',
  },
  {
    title: $t('sys.apis.group'),
    field: 'group',
  },
  {
    title: $t('sys.apis.serviceName'),
    field: 'serviceName',
  },
  {
    title: $t('sys.apis.description'),
    field: 'description',
    formatter: ({ cellValue }: any) => $t(`sys.${cellValue}`), // 国际化
  },
  {
    title: $t('sys.apis.method'),
    field: 'method',
  },
  // 状态
  {
    title: $t('sys.apis.must'),
    field: 'status',
    slots: {
      default: ({ row }: any) => {
        return (
          <ElTag type={row.isRequired ? 'success' : 'info'}>
            {row.isRequired ? $t('sys.menu.on') : $t('sys.menu.off')}
          </ElTag>
        );
      },
    },
  },
  // 创建时间
  {
    title: $t('sys.menu.createTime'),
    field: 'createTime',
    minWidth: 120,
    formatter: ['formatDate', 'yyyy-MM-dd'],
  },
  {
    title: $t('sys.menu.operation'),
    width: 200,
    slots: { default: 'action' },
  },
]);

// 表单配置项
const formColumns = computed(() => [
  {
    label: $t('sys.apis.path'), // 表单项的标签
    prop: 'path', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: $t('common.form.pleaseInput'), // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },

  {
    label: $t('sys.apis.serviceName'), // 表单项的标签
    prop: 'serviceName', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: $t('common.form.pleaseInput'), // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
  {
    label: $t('sys.apis.group'), // 表单项的标签
    prop: 'group', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: $t('common.form.pleaseInput'), // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
  // {
  //   label: $t('sys.apis.description'), // 表单项的标签
  //   prop: 'description', // 绑定到 formData.name
  //   xType: 'Input',
  //   span: 8, // 自行配置行宽
  //   componentProps: {
  //     placeholder: $t('common.form.pleaseInput'), // el-input 的属性
  //     clearable: true, // el-input 的属性
  //   },
  // },
  {
    label: $t('sys.apis.method'), // 表单项的标签
    prop: 'method', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: $t('common.form.pleaseInput'), // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
]);

/**
 * @author Buke
 * @description 打开弹窗
 * @param {string} type - 操作类型，'edit' 表示编辑，'add' 表示新增。
 * @param {any} row - 要编辑的行数据对象，包含字典相关信息。
 * @returns {void}
 */
const openDrawerHandle = (type: string, row?: any): void => {
  if (type === 'edit') {
    drawerApi.setState({ title: $t('sys.apis.editApi') });
    drawerApi.setData({ type: 'editData', id: row.id });
    drawerApi.open(); // 注意弹框打开需要分开，不能用同一个
  }
  if (type === 'add') {
    drawerApi.setState({ title: $t('sys.apis.addApi') });
    drawerApi.setData({ type: 'addData' });
    drawerApi.open(); // 注意弹框打开需要分开，不能用同一个
  }
};

/**
 * @author Buke
 * @description 删除字典
 * @param {any} row - 要删除的行数据。
 * @returns {void}
 */
async function DeleteHandle(row: any): Promise<void> {
  try {
    await deleteApi(row.id);
    ElMessage.success('删除成功');
    FosoTableRef.value?.gridApi.reload();
  } catch {
    ElMessage.error('删除失败');
  }
}

/**
 * @author Buke
 * @description 处理表格数据加载完成后的操作，如更新表格数据。
 * @returns {void}
 */
const reloadTable = (): void => {
  FosoTableRef.value?.gridApi.reload();
  drawerApi.close();
};

/**
 * @author Buke
 * @description 搜索字典
 * @returns {void}
 */
const searchHandle = (): void => {
  FosoTableRef.value?.gridApi.query();
};
</script>
